<!doctype html>
<style>
  p {font-size: 30px; font-family: Ahem; width: 420px; margin-bottom: 200vh; margin-top: 0px;}
  a:focus {outline: 5px solid orange;}
  a#A {color: teal;}
</style>

The long link spans over several lines. The first line has another link. There are no focusables below the two links.

<p><a href="#" id="a">aaa</a> xx <a href="#" id="b">bbbbb bbbbbbbbbbbbbb bbbb</a></p>

Some other content down here. This content must be reachable through spatial navigation.

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
  var resultMap = [
    ["Down", "a"],  // Scroll.
    ["Down", "a"],  // Scroll.
    ["Down", "b"],  // Move focus and scroll.
    ["Down", "b"],  // Scroll.
    ["Down", "b"],  // Scroll.
    ["Down", "b"],  // Scroll.
  ];
  document.getElementById("a").focus();
  snav.assertFocusMoves(resultMap);
</script>